<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" media="screen" />
    <!--<link href="../bootstrap-3.3.7-dist/css/bootstrap-switch.css" rel="stylesheet" />-->
    <script src="../jquery/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--<script src="../bootstrap-3.3.7-dist/js/bootstrap-switch.js"></script>-->
    <title>我的订单</title>
</head>

<body>
    <!--引用页面头部-->
    <div th:include="header :: header"></div>
    <!--引用页面头部-->

    <div class="panel panel-default container">
        <div class="panel-heading row">
            <ul class="nav navbar-nav col-md-12 col-sm-12 col-xs-12" style="width: 100%">
                <li class="col-md-3 col-sm-3 col-xs-3" >
                    <h5>房屋信息</h5>
                </li>
                <li class="col-md-3 col-sm-3 col-xs-3" >
                    <h5>单价</h5>
                </li>
                <li class="col-md-3 col-sm-3 col-xs-3">
                    <h5>房屋操作</h5>
                </li>
                <li class="col-md-3 col-sm-3 col-xs-3">
                    <h5>交易操作</h5>
                </li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="row" th:if="${orderList}" th:each="order:${orderList}">
                <ul class="nav navbar-nav col-md-12 col-sm-12" style="width: 100%">
                    <li class="col-md-3 col-sm-3 col-xs-3" >
                        <a href="#" class="thumbnail" style="padding: 2px;">
                            <img th:src="${order.getHouseImage()}" style="width: 100%;height: 100%"/>
                        </a>
                    </li>
                    <li class="col-md-3 col-sm-3 col-xs-3">
                        <label th:text="${order.getPayment()}"></label>
                    </li>
                    <li class="col-md-3 col-sm-3 col-xs-3">
                        <div class="box">
                            <button th:if="${order.getStatus()}==2" th:id="${order.getHouseId()}" type="button" class="btn btn-info openLock">
                                <span class="glyphicon glyphicon-lock"></span>开锁
                            </button>
                            <button th:if="${order.getStatus()}==2" th:id="${order.getHouseId()}" type="button" class="btn btn-warning closeLock">
                                <span class="glyphicon glyphicon-lock"></span>关锁
                            </button>
                            <button type="button" class="btn btn-info checkOut"  th:value="${order.getOrderId()}">
                                <span class="glyphicon glyphicon-remove"></span>退房
                            </button>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-3 col-xs-3">
                        <button type="button" class="btn btn-default btn-lg btn-block">评论</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(".checkOut").click(function () {
        var orderId=this.value;
        var param="/corequest?orderId="+orderId;
        window.location.replace(param);
    });

    $(".openLock").click(function () {
        var state=true;
        var mydata= {
            "lockState": state,
            "houseId": this.id
        }
        $.ajax({
            type: 'post',
            url: 'lock',
            data:mydata ,
            beforeSend: function (XMLHttpRequest) {

            },
            success: function (data) {
                alert(data);
            },
            complete: function (XMLHttpRequest, textStatus) {

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 状态码
                console.log(XMLHttpRequest.status);
                // 状态
                console.log(XMLHttpRequest.readyState);
                // 错误信息
                console.log(textStatus);
            }
        });

    });
    $(".closeLock").click(function () {
        var state=false;
        var mydata= {
            "lockState": state,
            "houseId": this.id
        }
        $.ajax({
            type: 'post',
            url: 'lock',
            data:mydata ,
            beforeSend: function (XMLHttpRequest) {

            },
            success: function (data) {
                alert(data);
            },
            complete: function (XMLHttpRequest, textStatus) {

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 状态码
                console.log(XMLHttpRequest.status);
                // 状态
                console.log(XMLHttpRequest.readyState);
                // 错误信息
                console.log(textStatus);
            }
        });

    });
</script>
</html>